<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>深度克隆</title>
  </head>
  <body></body>

  <script>
    var obj = {
      name: "老张",
      age: 50,
      n: null,
      un: undefined,
      // ===>>> 有函数会报错
      // fn: (e) => {
      //   console.log(e);
      // },
    };
    // ===>>> 可以解决循环引用问题
    obj.info = obj;
    deepClone(obj).then((res) => {
      // res.name = "好人";
      obj.name = "李四";
      console.log(res, obj);
    });
    function deepClone(obj) {
      return new Promise((resolve, reject) => {
        // ===>>> 创建一个消息通道。这个通常和 webworker 配合使用
        const { port1, port2 } = new MessageChannel();
        port1.onmessage = (msg) => {
          console.log(msg.data);
          resolve(msg.data);
        };
        port2.postMessage(obj);
      });
    }
  </script>
</html>
